import React from 'react'
import PropTypes from 'prop-types'
import Zmage from 'react-zmage'
import {getToken} from 'utils/authority'
import {Badge, Button, Icon, Modal, Table, Upload} from 'antd'
import classnames from 'classnames'
import {DropOption} from 'components'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'


const {confirm} = Modal

const List = ({
                onDeleteItem, handleRefresh, onLeaveItem, onEditItem, isMotion, location, ...tableProps
              }) => {

  const handleMenuClick = (record, e) => {
    if (e.key === 'edit') {
      onEditItem(record)
    } else if (e.key === 'view') {
      onEditItem(record, true)
    } else if (e.key === 'delete') {
      confirm({
        title: '您确定要删除这条数据吗?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  const statusMap = ['success', 'error']
  const status = ['上架', '下架']

  const handleChange = (info) => {
    if (info.file.status === 'done') {
      handleRefresh()
    }
  }

  const uploadImgProps = {
    name: 'img',
    action: '/api/v1/goods/img',
    headers: {Authentication: getToken()},
    multiple: false,
    accept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
    showUploadList: false,
    onChange: handleChange,
  }

  const uploadFileProps = {
    name: 'file',
    action: '/api/v1/goods/file',
    headers: {Authentication: getToken()},
    multiple: false,
    showUploadList: false,
    onChange: handleChange,
  }

  const columns = [
    {
      title: '商品编号',
      dataIndex: 'sn',
      key: 'sn',
    }, {
      title: '图片',
      dataIndex: 'goodsImg',
      key: 'goodsImg',
      render: (val, record) => {
        return val ? (<div><Zmage style={{width: 30, height: 30, borderRadius: '50%'}} src={val}/><Upload {...uploadImgProps} data={{gid: record.id}}><Icon className={styles.link} style={{marginLeft: 10}} type={'upload'}/></Upload></div>) : <Upload {...uploadImgProps} data={{gid: record.id}}>
          <Button type="primary"><Icon type="upload"/>上传图片</Button>
        </Upload>
      },
    }, {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
    }, {
      title: '库存数量',
      dataIndex: 'stockNum',
      key: 'stockNum',
    }, {
      title: '已售数量',
      dataIndex: 'saleNum',
      key: 'saleNum',
      render: (val) => val ? val : 0,
    }, {
      title: '商品分类',
      dataIndex: 'categoryName',
      key: 'categoryName',

    }, {
      title: '品牌',
      dataIndex: 'brandName',
      key: 'brandName',
    }, {
      title: '价格(RMB)',
      dataIndex: 'salePrice',
      key: 'salePrice',

    }, {
      title: '商品规格',
      dataIndex: 'specification',
      key: 'specification',
    }, {
      title: '折扣',
      dataIndex: 'discount',
      key: 'discount',
    },
    {
      title: '所属仓库',
      dataIndex: 'depotName',
      key: 'depotName',
    },
    {
      title: '上架/下架',
      dataIndex: 'status',
      key: 'status',
      filters: [
        {
          text: status[0],
          value: 0,
        },
        {
          text: status[1],
          value: 1,
        },
      ],
      onFilter: (value, record) => record.status.toString() === value,
      render (val) {
        return <Badge status={statusMap[val]} text={status[val]}/>
      },
    },
    {
      title: '商品详情',
      dataIndex: 'goodsDetail',
      key: 'goodsDetail',
      render: (val, record) => <div>
        <Upload {...uploadFileProps} data={{gid: record.id}}>
          <Button>上传</Button>
        </Upload>
        {val ? <a href={val} target="_blank" style={{marginLeft: 10}}><Icon type={'download'}/>下载</a> : ''}
      </div>,
    },
    {
      title: '操作',
      key: 'operation',
      width: '100',
      fixed: 'right',
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)}
                           menuOptions={[{key: 'edit', name: '编辑'}, {
                             key: 'delete',
                             name: '删除',
                           }]}/>
      },
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table, {[styles.motion]: isMotion})}
      scroll={{x: 1500}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  isMotion: PropTypes.bool,
  location: PropTypes.object,
}

export default List
